<template>
    <div id="maintabbar">
     <tabBar>
      <tabbaritem link="/home" activeColor="rgb(218, 144, 32)">
           <img slot="item-icon" src="~assets/images/tabbar/homepage.svg" alt="">
            <img slot="item-icon-active" src="~assets/images/tabbar/homepage-active.svg" alt="">
          <div slot="item-text">首页</div>
      </tabbaritem>
      <tabbaritem link="/category" activeColor="rgb(218, 144, 32)">
           <img slot="item-icon" src="~assets/images/tabbar/category.svg" alt="">
           <img slot="item-icon-active" src="~assets/images/tabbar/category-active.svg" alt="">
          <div slot="item-text">分类</div>
      </tabbaritem>
      <tabbaritem link="/buycar" activeColor="rgb(218, 144, 32)">
           <img slot="item-icon" src="~assets/images/tabbar/buycar.svg" alt="">
           <img slot="item-icon-active" src="~assets/images/tabbar/buycar-active.svg" alt="">
          <div slot="item-text">购物车</div>
      </tabbaritem>
      <tabbaritem link="/profile" activeColor="rgb(218, 144, 32)">
           <img slot="item-icon" src="~assets/images/tabbar/profile.svg" alt="">
           <img slot="item-icon-active" src="~assets/images/tabbar/profile-active.svg" alt="">
          <div slot="item-text">我的</div>
      </tabbaritem>
    
    </tabBar>
    </div>
</template>

<script>
import tabBar from './TabBar'
import tabbaritem from './TabBarItem'
export default {
  name:'maintabBar',
  components:{
    tabBar,
    tabbaritem
  }
}
</script>

<style>
#tab-bar {
    display: flex;
    background-color: #f6f6f6;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0 -1px 1px rgba(100,100,100,.2);
  }

</style>